<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <canvas width="1980" height="1080"></canvas>
    <script src="d3.v4.min.js"></script>
    <script>
        

        const canvas = document.querySelector('canvas')
        context = canvas.getContext('2d')
        width = canvas.width
        height = canvas.height

        const simulation = d3.forceSimulation()
        .force('center',d3.forceCenter())
        .force('link',d3.forceLink().id(d=>{
            return d.id
        }))
        .force('charge',d3.forceManyBody().strength(0.002))
        // .force("x", d3.forceX())
        // .force("y", d3.forceY())
        .force('collide',d3.forceCollide().radius(//避免圆的边缘重合的函数
            (d)=>{ return 2}
        ))

        d3.csv('data690000.csv',(error,Json)=>{
            if(error) throw error

            //计算总时间
            // let t1 = new Date().getTime()



//计算时间
let t1_format = new Date().getTime()

let exist = new Array();

let index = new Array();
// let group = new Array();

// for(let i in list){
    // let field = 'inst_name';
//在开头插入一个源节点origin
// let origin = 'origin'
// index.unshift('origin')
// index.unshift(0)

//////////////////////////////
for(let j in Json){
    if(exist.indexOf(Json[j].inst_name )== -1){
        index.push(Json[j].inst_name);
        // group.push(1);//小改改;
        exist.push(Json[j].inst_name);
    }
}
// }


for(let j in Json){
    if(exist.indexOf(Json[j].task_name )== -1){
        index.push(Json[j].task_name);
        // group.push(2);//小改改;
        exist.push(Json[j].task_name);
    }
}



for(let j in Json){
    if(exist.indexOf(Json[j].job_name )== -1){
        index.push(Json[j].job_name);
        // group.push(3)//小改改;
        exist.push(Json[j].job_name);
    }
}


let dnodes = new Array()
for(let a in index){
    let object = new Object()
    object.id = index[a];
    // object.group = group[a];
    dnodes.push(object)
    // console.log(object);
}

// console.log(typeof data);

// let nodes0 = JSON.stringify(data)

// console.log(nodes0);
// let dnodes = JSON.parse(nodes0)


// console.log(dnodes);



//构造links数组
//添加origin节点的link
// let data0 = new Array();

    
    
let data1 = new Array();
let exists = new Array()

for(let i in Json){
    let job = Json[i].job_name;
    let task = Json[i].task_name;
    let a = new Object();
    a.source = job;
    a.target = task;
    // a.value = 25;

    if(exists.indexOf(a)==-1){
    data1.push(a);
    exists.push(a)
}

}

    // let data2 = data0.concat(data1)

let data3 = new Array();
for(let i in Json){
    let task = Json[i].task_name;
    let instance = Json[i].inst_name;
    let a = new Object();
    a.source = task;
    a.target = instance;
    // a.value = 0.25

    if(exists.indexOf(a)==-1){
    data3.push(a);
    exists.push(a)
}
}
let dlinks = data1.concat(data3)



// let links0 = JSON.stringify(datax);
// let links = JSON.parse(links0);

//对links去重，赋值给dlinks
// let source = new Array();	
// let target = new Array();

// let dlinks = new Array();

// for(let k = 0;k<links.length;k++){

// if((source.indexOf(links[k].source) > -1)&(target.indexOf(links[k].target) > -1)){

// }else{
//     source.push(links[k].source);
//     target.push(links[k].target);
//     dlinks.push(links[k])

// }
// }

// console.log(dlinks);


let t2_format = new Date().getTime()
// console.log(t2_format);
console.log(`格式化数据CPU计算时间为${t2_format-t1_format}ms`);






    // (function (){
        console.time('test');
        simulation.nodes(dnodes)
        .on('tick',ticked)

        console.timeEnd('test')
    // })()

            

            simulation.force('link')
            .links(dlinks)


let render = 0
            function ticked(){


            let t1_render = new Date().getTime()
            
                context.clearRect(0,0,width,height)
                context.save()
                context.translate(width / 2, height / 2 + 40)

                // context.beginPath()
                // dlinks.forEach(drawLink)
                // context.strokeStyle = "#aaa";
                // context.stroke();

                
                dnodes.forEach(drawNode)
                context.fill()
                context.strokeStyle = "#fff";//////////
                context.stroke();

                context.restore()

            let t2_render = new Date().getTime()

            
            render = (t2_render-t1_render) + render

            // console.log(`渲染treemap_DOM节点时间为${render}ms`);

            }

        // let t2 = new Date().getTime()
        // console.log(`代码执行总时间为${t2-t1}ms`);

        })


        // function drawLink(d) {
        //     context.moveTo(d.source.x, d.source.y);
        //     context.lineTo(d.target.x, d.target.y);
        //     }

        function drawNode(d) {
            context.beginPath()
            context.moveTo(d.x + 2, d.y);//这一句不能够缺少
            context.arc(d.x, d.y, 2, 0, 2 * Math.PI);
}
    </script>
</body>
</html>